<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
  <!-- <ul>
    <li><a href="#/home">首页</a></li>
    <li><a href="#/about">关于</a></li>
  </ul> -->

  <!-- 渲染对应的代码块 -->
  <div id="view"></div>
  <!-- 相当与vue3的路由路口 -->
  <script>
    // 如果
    // 监听hash变化
    let view = $('#view')
    let dom = `<div class="home">
           <a href="#/about">go about</a>
          <p>这是首页</p>
          </div>`

    let dom2 = `<div class="about">
    <a href="#/detail">go detail</a>
    <p>这是about page</p>
  </div>`
  let dom3=`<h1>详情页</h1>`
    let routes = [
      {
        path: '#/home',
        component: dom
      },
      {
        path: '#/about',
        component: dom2
      },
      {
        path: '#/detail',
        component: dom3
      }
    ]

    window.addEventListener('hashchange', () => {
      let hash = location.hash
      routes.forEach((route) => {
        if (route.path == hash) {
          view.html(route.component)
        }
      })
    })

    //内容加载完毕
    window.addEventListener('DOMContentLoaded', () => {
      if (!location.hash) {
        location.hash = '/home'
      } else {
        let hash = location.hash
        routes.forEach((route) => {
          if (route.path == hash) {
            view.html(route.component)
          }
        })
      }
    })
  </script>

</body>

</html>